<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="form.data.id ? '修改俱乐部荣誉' : '新增俱乐部荣誉'"
    ok-text="提交"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="110">
          <FormItem prop="honorName" label="荣誉名称">
            <Input type="text" v-model="form.data.honorName" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="photoPath" label="荣誉图片">
            <upload-img v-if="form.visible" @on-change="onUploadImg" :defaultImageList="defaultImageList"></upload-img>
          </FormItem>
          <FormItem prop="isShow" label="是否外网显示">
            <Select v-model.number="form.data.isShow" style="width:200px">
              <Option :value="0">显示</Option>
              <Option :value="1">不显示</Option>
            </Select>
          </FormItem>
          <FormItem prop="description" label="描述">
            <Input type="textarea" v-model="form.data.description" placeholder="请输入" :rows="4"></Input>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import clubApi from '@/api/club'

  export default {
    name: 'update-honor-modal',
    props: [
      'form'
    ],
    components: {
      uploadImg
    },
    data () {
      return {
        loading: true,
        ruleValidate: {
          honorName: [
            { required: true, message: '请输入荣誉名称', trigger: 'change' }
          ],
          photoPath: [
             { required: true, message: '请上传荣誉图片', trigger: 'change' }
          ],
          isShow: [
            { required: true, type: 'number', message: '请选择是否外网显示', trigger: 'change' }
          ],
          description: [
            { required: true, message: '请输入描述', trigger: 'change' },
            { max: 100, message: '描述字符长度应小于100', trigger: 'change' }
          ]
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo'
      })
    },
    watch: {
      'form.visible': 'onClose'
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入项目!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$refs.form.resetFields()
        } else {
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.photoPath || '')
        }
      },
      onUploadImg (imgList) {
        this.form.data.photoPath = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('photoPath')
      },
      async submitForm () {
        this.form.data.pkRcId = this.userInfo.pkRclubInfo
        if (this.form.data.id) {
          await clubApi.updateHonor(this.form.data)
          this.$Message.info('修改成功')
        } else {
          await clubApi.createHonor(this.form.data)
          this.$Message.info('创建成功')
        }
        this.form.visible = false
        this.$emit('submit')
      }
    }
  }
</script>
